<template>
  <view class="page-box">
    <u-navbar
      :title="title"
      :leftIconSize="autoBack ? 12 : 0"
      :rightIcon="rightIcon"
      :autoBack="false"
      @rightClick="rightClick"
      @leftClick="leftClick"
    >
    </u-navbar>

    <view
      class="content-box"
      :style="{
        'margin-top': titleBarHeight,
        height: tab
          ? `calc(100vh - ${titleBarHeight} - 129rpx)`
          : `calc(100vh - ${titleBarHeight})`,
      }"
    >
      <slot></slot>
    </view>
    <TabBar
      v-if="tab"
      :tabCurrent="tabCurrent"
      @input="input"
      @change="change"
    ></TabBar>
  </view>
</template>

<script>
import TabBar from "@/components/tab-bar/index.vue";
import {
  getSystemHi,
  getUserInfo,
  setPageTitle,
  getPageTitle,
} from "@/store/user";
export default {
  options: {
    multipleSlots: true,
  },
  components: {
    TabBar,
  },
  props: {
    title: String,
    tab: Boolean,
    tabCurrent: String,
    rightIcon: String,
    autoBack: {
      type: Boolean,
      default: true,
    },
    callback: Function,
  },
  data() {
    return {
      current: "",
      titleBarHeight: "64px",
    };
  },
  mounted() {},
  created() {
    let pages = getCurrentPages(); // 获取栈实例
    let page = pages[pages.length - 1];
    const userInfo = getUserInfo();
    if (!page) return;
    const route = page.route;
    const that = this;
    if (!userInfo && route !== "pages/login/index") {
      setTimeout(() => {
        if (!that.$refs.uToast) return;
        that.$refs.uToast.show({
          message: "请先登录,1秒自动跳转",
          type: "error",
          icon: "error",
          duration: 1500,
          complete() {
            uni.reLaunch({
              url: "/pages/login/index",
              animationType: "pop-in",
            });
          },
        });
      }, 3000);
    }

    //保存当前页面标题
    const statusBarHeight = getSystemHi();
    this.titleBarHeight = statusBarHeight + 44 + "px";
    //3.计算 页面头部高度，单位：px，计算公式：导航栏高度 + 状态栏高度
  },
  methods: {
    input(data) {
      this.$emit("input", data);
    },
    change(data) {
      this.$emit("change", data);
    },
    rightClick() {
      this.$emit("rightClick");
    },
    leftClick() {
      if (this.callback) {
        this.callback();
        return;
      }
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page-box {
  min-height: 100vh;
  background-color: #eef2fc;
}

.content-box {
  overflow: auto;
  display: flex;
  flex-direction: column;
}
</style>
